{extend name="common/common" /}

{block name="content"}
<el-card class="box-card">
	<div slot="header">
		<span class="span-primary"><i class="fa fa-list"></i></span>
		{$Header|default='交易信息汇总'}
	</div>
	<div class="el-card-content">
		<div class="seaForm">
			<el-form :inline="true" class="search-table-form">
				<el-form-item>
					<el-select v-model="seaForm.depart_id" placeholder="请选择地区">
						{volist name="DepartOpt" id="v"}
						<el-option label="{$v.name}" value="{$v.id}"></el-option>
						{/volist}
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-date-picker v-model="seaForm.s_time" :type="pickerType"
						value-format="timestamp" placeholder="开始时间">
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-date-picker v-model="seaForm.e_time" :type="pickerType"
						value-format="timestamp" placeholder="结束时间">
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="info" plain @click="getTable">查询</el-button>
					<el-button type="primary" plain @click="exportExcel">导出</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div id="el-table-box">
			<el-table :data="table.tableData" border  show-summary
				:span-method="objectSpanMethod" :summary-method="getSummaries">
				<el-table-column align="center" prop="belonged_name" label="商品大类"></el-table-column>
				<el-table-column align="left"   prop="name" label="具体类别"></el-table-column>
				<el-table-column align="center" prop="buy" label="线上消费金额（元）" width="200"></el-table-column>
				<el-table-column align="center" prop="buy_sum" label="合计" width="200"></el-table-column>
				<el-table-column align="center" prop="sell" label="线上销售金额（元）" width="200"></el-table-column>
				<el-table-column align="center" prop="sell_sum" label="合计" width="200"></el-table-column>
			</el-table>
		</div>
	</div>
{/block}

{block name="script"}
<script type="text/javascript" src="__JS__/plugins/elementui/vue-table-export/Blob.js"></script>
<script type="text/javascript" src="__JS__/plugins/elementui/vue-table-export/FileSaver.js"></script>
<script type="text/javascript" src="__JS__/plugins/elementui/vue-table-export/shim.min.js"></script>
<script type="text/javascript" src="__JS__/plugins/elementui/vue-table-export/xlsx.full.min.js"></script>
<script type="text/javascript">
var main = new Vue({
	el:"#main",
	data:{
		loading:false,
		pickerType:"{$PickerType|default='date'}",
		seaForm:{
			depart_id:"",s_time:"{$s_time}",e_time:"{$e_time}",pageSize:10,pageNumber:1,
		},
		table:{
			tableData:"",
		}
	},
	mounted:function () {
		this.getTable();
	},
	methods:{
		getTable() {
			var param = this.seaForm;
			var url = '{:url("Statistics/transaction")}';
			$.post(url,param,function(res) {
				main.loading=false;
				if(res.code == 1){
					main.$message({message:res.msg,type:'success'});
					main.table.tableData = res.data;
				}else{
					main.$notify.error({title:'失败',message:res.msg});
				}
			});
		},
		pageSizeChange(val) {
			this.seaForm.pageSize = val;
			this.getTable();
		},
		curPageChange(val) {
			this.seaForm.pageNumber = val;
			this.getTable();
		},
		objectSpanMethod({row,column,rowIndex,columnIndex}){
			if (columnIndex === 0 || columnIndex === 3 || columnIndex == 5) {
				if (row.rowspan == 'false') {
					return {rowspan:row.row_num,colspan:1};
				}else{
					return {rowspan:0,colspan:0};
				}
			}
		},
		getSummaries(param) {
			const { columns, data } = param;
			const sums = [];
			columns.forEach((column, index) => {
				if (index === 0) {
					sums[index] = '合计';
					return;
				} else if(index === 2 || index === 4) {
					const values = data.map(item => Number(item[column.property]));
					if (!values.every(value => isNaN(value))) {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr);
							if (!isNaN(value)) {
								return prev + curr;
							} else {
								return prev;
							}
						}, 0);
					}
				} else {
					sums[index] = ' ';
					return;
				}
			});
			return sums;
		},
		exportExcel (type) {
			var sheetName = "交易信息汇总";
			var FileName = "交易信息汇总";
			FileName += ".xlsx";
			var table = document.getElementById('el-table-box');
			var wb = XLSX.utils.table_to_book(table, {sheet: sheetName});
			XLSX.writeFile(wb,FileName);
	 	},
	}
})
</script>
{/block}
